<!DOCTYPE html>
<html>
<head>
	<title>打印结算单</title>
	<meta charset="utf-8">
</head>
<style type="text/css">
    body,html {
    margin: 0;
    padding: 0;
    width: 100%;
    color: #000;
    font-size: 9pt;
    font-family: Microsoft YaHei,微软雅黑;
}

#container {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 17cm;
    height: auto;
    color: #000;
}

.receipt-content {
    float: left;
    width: 100%;
    height: auto;
}

.receipt-header {
    float: left;
    padding-bottom: 1mm;
    width: 100%;
    text-align: right;
}

.table {
    float: left;
    border: .1mm solid #333;
    border-bottom: 0;
}

.column,.table {
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

.column {
    margin: 0;
    padding: 0;
    height: 6mm;
    border-bottom: .1mm solid #333;
    line-height: 6mm;
}

.item {
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-right: .1mm solid #333;
}

.item,.name,.value {
    float: left;
    height: 100%;
}

.name,.value {
    display: block;
}

.column .item:last-child {
    border-right: 0;
}

.column-3 .item {
    width: 33.33%;
}

.line {
    height: 6mm;
}

.half-line {
    width: 100%;
    height: 50%;
}

.half-line,.line {
    border-bottom: .1mm solid #333;
}



.column-line-2,.line-2 {
    height: 12mm;
}

.line-2 {
    background: #fff;
    line-height: 12mm;
}

.column-line-3,.line-3 {
    height: 18mm;
}

.line-3 {
    background: #fff;
    line-height: 18mm;
}

.column-line-4,.line-4 {
    height: 24mm;
}

.line-1 {
    background: #fff;
    line-height: 24mm;
}

.column-line-5 {
    height: 30mm;
}

.line-5 {
    height: 30mm;
    background: #fff;
    line-height: 30mm;
}

.column-line-6,.line-6 {
    height: 36mm;
}

.line-6 {
    background: #fff;
    line-height: 36mm;
}

.column-line-7,.line-7 {
    height: 42mm;
}

.line-7 {
    background: #fff;
    line-height: 42mm;
}

.column-line-8,.line-8 {
    height: 48mm;
}

.line-8 {
    background: #fff;
    line-height: 48mm;
}

.column-line-9,.line-9 {
    height: 54mm;
}

.line-9 {
    background: #fff;
    line-height: 54mm;
}

.column-line-10,.line-10 {
    height: 60mm;
}

.line-10 {
    background: #fff;
    line-height: 60mm;
}

.w5 {
    width: 5%;
}

.w10 {
    width: 10%;
}

.w15 {
    width: 15%;
}

.w20 {
    width: 20%;
}

.w25 {
    width: 25%;
}

.w30 {
    width: 30%;
}

.w35 {
    width: 35%;
}

.w40 {
    width: 40%;
}

.w45 {
    width: 45%;
}

.w50 {
    width: 50%;
}

.w55 {
    width: 55%;
}

.w60 {
    width: 60%;
}

.w65 {
    width: 65%;
}

.w70 {
    width: 70%;
}

.w75 {
    width: 75%;
}

.w80 {
    width: 80%;
}

.w85 {
    width: 85%;
}

.w90 {
    width: 90%;
}

.w95 {
    width: 95%;
}

.w100 {
    width: 100%;
}

.w175 {
    width: 17.5%;
}

.center {
    text-align: center;
}

.h25 {
    height: 25%;
}

.h75 {
    height: 75%;
}

.absolute-fix {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    padding: 0;
    width: 80%;
    outline: 0;
}

.receipt-decoration .receipt-value {
    float: left;
    display: block!important;
    min-width: 6em!important;
}

.min-4 {
    float: left;
    display: block!important;
    min-width: 4em!important;
}

.r-60 {
    width: 60%!important;
    text-align: right!important;
}

.l-40,.r-60 {
    float: left;
    display: block!important;
    padding-left: 0!important;
}

.l-40 {
    width: 40%!important;
}

.l-40,.text-left {
    text-align: left!important;
}

.text-right {
    text-align: right!important;
}

.invalid-print {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 6em;
    height: 1.1em;
    color: #cacaca;
    letter-spacing: 1em;
    font-size: 5em;
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    -o-transform: rotate(-25deg);
    transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
}

</style>
<body>
	<div id="container">
        <div class="receipt-header receipt-title" style="text-align:center;">
            这里是抬头纹
        </div>
        <div class="receipt-header">
            结算单编号：{{data.sn}}
        </div>
        <div class="receipt-table">
            <div class="receipt-column receipt-column-3">
                <div class="receipt-item">
                    <span class="receipt-name">合同单号:</span>
                    <span class="receipt-value">xxx</span>
                </div>
                <div class="receipt-item">
                    <span class="receipt-name">客户名:</span>
                    <span class="receipt-value">{{data.customer}}</span>
                </div>
                <div class="receipt-item">
                    <span class="receipt-name">联系方式:</span>
                    <span class="receipt-value">{{data.phone}}</span>
                </div>
            </div>
            <div class="receipt-column">
                <div class="receipt-item w40 receipt-vehicle">
                    <span class="receipt-name">车型:</span>
                    <span class="receipt-value">{{data.brand}}</span>
                    <span class="receipt-value">{{data.model}}</span>
                    <span class="receipt-value">{{data.version}}</span>
                </div>
                <div class="receipt-item w10">
                    <span class="receipt-name">颜色:</span>
                    <span class="receipt-value">{{data.color}}</span>
                </div>
                <div class="receipt-item w10">
                    <span class="receipt-name">内饰:</span>
                    <span class="receipt-value">{{data.interior}}</span>
                </div>
                <div class="receipt-item w40">
                    <span class="receipt-name">车架号:</span>
                    <span class="receipt-value">{{data.vin}}</span>
                </div>
            </div>
            <div class="receipt-column center">
                <div class="receipt-item w70">
                    <span class="receipt-name">费用明细</span>
                </div>
                <div class="receipt-item w15">
                    <span class="receipt-name">预算价</span>
                </div>
                <div class="receipt-item w15">
                    <span class="receipt-name">实际结算价</span>
                </div>
            </div>
            <div class="receipt-column">
                <div class="receipt-item w70">
                    <span class="receipt-name">整车价格：标准价（</span>
                    <span class="receipt-value">{{data.msrp}}</span>
                    <span class="receipt-name">）</span>
                </div>
                <div class="receipt-item w15 center">
                    <span class="receipt-value">{{data.bgt_amount}}</span>
                </div>
                <div class="receipt-item w15 center">
                    <span class="receipt-value">{{data.fnl_amount}}</span>
                </div>
            </div>
            <div class="receipt-column">
                <div class="receipt-item w60">
                    <span class="receipt-name">按揭单位：</span>
                    <span class="receipt-value">{{data.loan_company}}</span>
                </div>
                <div class="receipt-item w10">
                    <span class="receipt-name">首付款</span>
                </div>
                <div class="receipt-item w15 center">
                    <span class="receipt-value">{{data.down_payment}}</span>
                </div>
                <div class="receipt-item w15 center">
                    <span class="receipt-value">{{data.fnl_down_payment}}</span>
                </div>
            </div>
            <div class="receipt-column">
                <div class="receipt-item w60">
                    <span class="receipt-name">按揭</span>
                    <span class="receipt-value">{{data.loan_years}}</span>
                    <span class="receipt-name">年</span>
                </div>
                <div class="receipt-item w10">
                    <span class="receipt-name">贷款金额</span>
                </div>
                <div class="receipt-item w15 center">
                    <span class="receipt-value">{{data.loan_amount}}</span>
                </div>
                <div class="receipt-item w15 center">
                    <span class="receipt-value">{{data.fnl_loan_amount}}</span>
                </div>
            </div>
            <div class="receipt-column">
                <div class="receipt-item w60">
                    <span class="receipt-name">预估月供：</span>
                    <span class="receipt-value">{{data.loan_every_month_amount}}</span>
                </div>
                <div class="receipt-item w10">
                    <span class="receipt-name">贷款服务费</span>
                </div>
                <div class="receipt-item w15 center">
                    <span class="receipt-value">{{data.loan_service_amount}}</span>
                </div>
                <div class="receipt-item w15 center">
                    <span class="receipt-value">{{data.fnl_loan_service_amount}}</span>
                </div>
            </div>
            <div class="receipt-column column-line-3">
                <div class="receipt-item w60 line-3">
                    <span class="receipt-name">上牌及代办费用</span>
                </div>
                <div class="receipt-line">
                    <div class="receipt-item w10">
                        <span class="receipt-name">购置附加税</span>
                    </div>
                    <div class="receipt-item w15 center">
                        <span class="receipt-value">{{data.purchase_tax}}</span>
                    </div>
                    <div class="receipt-item w15 center">
                        <span class="receipt-value">{{data.fnl_purchase_tax}}</span>
                    </div>    
                </div>
                <div class="receipt-line">
                    <div class="receipt-item w10">
                        <span class="receipt-name">车辆牌证费</span>
                    </div>
                    <div class="receipt-item w15 center">
                        <span class="receipt-value">{{data.license_plate}}</span>
                    </div>
                    <div class="receipt-item w15 center">
                        <span class="receipt-value">{{data.fnl_license_plate}}</span>
                    </div>    
                </div>
                <div class="receipt-line" style="border-bottom:0;">
                    <div class="receipt-item w10">
                        <span class="receipt-name">代办服务费</span>
                    </div>
                    <div class="receipt-item w15 center">
                        <span class="receipt-value">{{data.service_amount}}</span>
                    </div>
                    <div class="receipt-item w15 center">
                        <span class="receipt-value">{{data.fnl_service_amount}}</span>
                    </div>    
                </div>
            </div>
            <div class="receipt-column column-line-3">
                <div class="receipt-item w60 line-3" style="line-height:0px;white-space: normal;padding-top:3px;padding-bottom:2px;">
                    <div class="h25">
                        <span class="receipt-name">保险公司：</span>
                        <span class="receipt-value">{{data.insurance_company}}</span>
                    </div>
                    <div class="h25">
                        <span class="receipt-name">保险项目：</span>
                        <span class="receipt-value">{{data.insurance_item}}</span>
                    </div>
                </div>
                <div class="receipt-line">
                    <div class="receipt-item w10">
                        <span class="receipt-name">第一年保险费</span>
                    </div>
                    <div class="receipt-item w15 center">
                        <span class="receipt-value">{{data.insurance_amount}}</span>
                    </div>
                    <div class="receipt-item w15 center">
                        <span class="receipt-value">{{data.fnl_insurance_amount}}</span>
                    </div>    
                </div>
                <div class="receipt-line">
                    <div class="receipt-item w10">
                        <span class="receipt-name">车船使用税</span>
                    </div>
                    <div class="receipt-item w15 center">
                        <span class="receipt-value">{{data.vehicle_use_tax}}</span>
                    </div>
                    <div class="receipt-item w15 center">
                        <span class="receipt-value">{{data.fnl_vehicle_use_tax}}</span>
                    </div>    
                </div>
                <div class="receipt-line" style="border-bottom:0;">
                    <div class="receipt-item w10">
                        <span class="receipt-name">续保预收款</span>
                    </div>
                    <div class="receipt-item w15 center">
                        <span class="receipt-value">{{data.extended_insurance_amount}}</span>
                    </div>
                    <div class="receipt-item w15 center">
                        <span class="receipt-value">{{data.fnl_extended_insurance_amount}}</span>
                    </div>    
                </div>
            </div>
            <div class="receipt-column column-line-10">
                <div class="receipt-item w60 line-10" style="line-height:normal;white-space: normal;padding:0px;">
                    <div class="half-line">
                        <div class="receipt-name h25">自费装潢项目：</div>
                        <div class="h25">
                            <span class="receipt-name">项目一：</span>
                            <span class="receipt-value">{{data.decoration_item_a}}</span>
                            <span class="receipt-name">项目二：</span>
                            <span class="receipt-value">{{data.decoration_item_b}}</span>
                            <span class="receipt-name">项目三：</span>
                            <span class="receipt-value">{{data.decoration_item_c}}</span>
                        </div>
                        <div class="h25">
                            <span class="receipt-name">项目四：</span>
                            <span class="receipt-value">{{data.decoration_item_d}}</span>
                            <span class="receipt-name">项目五：</span>
                            <span class="receipt-value">{{data.decoration_item_e}}</span>
                            <span class="receipt-name">项目六：</span>
                            <span class="receipt-value">{{data.decoration_item_f}}</span>
                        </div>
                        <div class="h25">
                            <span class="receipt-name">项目七：</span>
                            <span class="receipt-value">{{data.decoration_item_g}}</span>
                            <span class="receipt-name">项目八：</span>
                            <span class="receipt-value">{{data.decoration_item_h}}</span>
                            <span class="receipt-name">项目九：</span>
                            <span class="receipt-value">{{data.decoration_item_i}}</span>
                        </div>
                    </div>
                    <div class="half-line" style="border-bottom:0px;">
                        <div class="receipt-name h25">车价内已含装潢项目：</div>
                        <div class="h25">
                            <span class="receipt-name">项目一：</span>
                            <span class="receipt-value">{{data.decoration_item_a}}</span>
                            <span class="receipt-name">项目二：</span>
                            <span class="receipt-value">{{data.decoration_item_b}}</span>
                            <span class="receipt-name">项目三：</span>
                            <span class="receipt-value">{{data.decoration_item_c}}</span>
                        </div>
                        <div class="h25">
                            <span class="receipt-name">项目四：</span>
                            <span class="receipt-value">{{data.decoration_item_d}}</span>
                            <span class="receipt-name">项目五：</span>
                            <span class="receipt-value">{{data.decoration_item_e}}</span>
                            <span class="receipt-name">项目六：</span>
                            <span class="receipt-value">{{data.decoration_item_f}}</span>
                        </div>
                        <div class="h25">
                            <span class="receipt-name">项目七：</span>
                            <span class="receipt-value">{{data.decoration_item_g}}</span>
                            <span class="receipt-name">项目八：</span>
                            <span class="receipt-value">{{data.decoration_item_h}}</span>
                            <span class="receipt-name">项目九：</span>
                            <span class="receipt-value">{{data.decoration_item_i}}</span>
                        </div>
                    </div>
                </div>
                <div class="receipt-item w10 line-10 center" style="line-height:250px;">
                    <span class="receipt-name">装潢合计</span>
                </div>
                <div class="receipt-item w15 line-10 center" style="position: relative;">
                    <span class="receipt-value absolute-fix">{{data.decoration_amount}}</span>
                </div>
                <div class="receipt-item w15 line-10 center" style="position: relative;">
                    <span class="receipt-value absolute-fix">{{data.fnl_decoration_amount}}</span>
                </div>
            </div>
            <div class="receipt-column">
                <div class="receipt-item w70">
                    <span class="receipt-name">延长车辆质保期费用：</span>
                    <span class="receipt-value">{{data.extended_service_years}}</span>
                    <span class="receipt-name">年</span>
                </div>
                <div class="receipt-item w15 center">
                    <span class="receipt-value">{{data.extended_service_amount}}</span>
                </div>
                <div class="receipt-item w15 center">
                    <span class="receipt-value">{{data.fnl_extended_service_amount}}</span>
                </div>
            </div>
            <div class="receipt-column column-line-2">
                <div class="receipt-item w40 line-2">
                    <span class="receipt-name">百万身驾</span>
                </div>
                <div class="receipt-line">
                    <div class="receipt-item w30 center">
                        <span class="receipt-name">主险:</span>
                        <span class="receipt-value">{{data.million_insurance_amount}}</span>
                    </div>
                    <div class="receipt-item w15 center">
                        <span class="receipt-name">合计每年：</span>
                        <span class="receipt-value">{{data.million_insurance_year_amount}}</span>
                    </div>
                    <div class="receipt-item w15 center">
                        <span class="receipt-name">合计每年：</span>
                        <span class="receipt-value">{{data.fnl_million_insurance_year_amount}}</span>
                    </div>    
                </div>
                <div class="receipt-line" style="border-bottom:0;">
                    <div class="receipt-item w30 center">
                        <span class="receipt-name">附加险:</span>
                        <span class="receipt-value">{{data.million_insurance_extra_amount}}</span>
                    </div>
                    <div class="receipt-item w15 center">
                        <span class="receipt-name">年数:</span>
                        <span class="receipt-value">{{data.million_insurance_years}}</span>
                    </div>
                    <div class="receipt-item w15 center">
                        <span class="receipt-name">年数:</span>
                        <span class="receipt-value">{{data.fnl_million_insurance_years}}</span>
                    </div>    
                </div>
            </div>
            <div class="receipt-column column-line-2">
                <div class="receipt-item w15 line-2">
                    <span class="receipt-name">置换信息</span>
                </div>
                <div class="receipt-line">
                    <div class="receipt-item w35 center">
                        <span class="receipt-name">车型</span>
                        <span class="receipt-value">{{data.replacement_vehicle}}</span>
                    </div>
                    <div class="receipt-item w35 center">
                        <span class="receipt-name">行驶里程</span>
                        <span class="receipt-value">{{data.replacement_miles}}</span>
                    </div>
                    <div class="receipt-item w15 center">

                    </div>    
                </div>
                <div class="receipt-line" style="border-bottom:0;">
                    <div class="receipt-item w35 center">
                        <span class="receipt-name">颜色</span>
                        <span class="receipt-value">{{data.replacement_color}}</span>
                    </div>
                    <div class="receipt-item w35 center">
                        <span class="receipt-name">评估价格</span>
                        <span class="receipt-value">{{data.replacement_amount}}</span>
                    </div>
                    <div class="receipt-item w15 center">

                    </div>    
                </div>
            </div>
            <div class="receipt-column">
                <div class="receipt-item w70">
                    <span class="receipt-name">收费合计：（</span>
                    <span class="receipt-value"></span>
                    <span class="receipt-name">）</span>
                </div>
                <div class="receipt-item w15 center">

                </div>
                <div class="receipt-item w15 center">

                </div>
            </div>
            <div class="receipt-column">
                <div class="receipt-item w70">
                    <span class="receipt-name">结账应收/付款（</span>

                    <span class="receipt-name">元）</span>
                </div>
                <div class="receipt-item w15 center">
                    <span class="receipt-name">应收：</span>
                    <span class="receipt-value">{{data.total_amount}}</span>
                </div>
                <div class="receipt-item w15 center">
                    <span class="receipt-name">应付：</span>
                    <span class="receipt-value">{{data.fnl_total_amount}}</span>
                </div>
            </div>
            <div class="receipt-column">
                <div class="receipt-item w70">
                    <span class="receipt-name">数量合计：</span>
                </div>
                <div class="receipt-item w15 center">
                    <span class="receipt-name">总应收：</span>
                    <span class="receipt-value"></span>
                </div>
                <div class="receipt-item w15 center">
                    <span class="receipt-name">总应付：</span>
                    <span class="receipt-value"></span>
                </div>
            </div>
            <div class="receipt-column">
                <div class="receipt-item">
                <span class="receipt-name">备注：预算价格仅供参考，以实际结算价格为准；*为贷款客户必保项目</span>
                </div>
            </div>
            <div class="receipt-column">
                <div class="receipt-item w35 center">
                    <span class="receipt-name">财务经理</span>
                </div>
                <div class="receipt-item w35 center">
                    <span class="receipt-name">销售经理</span>
                </div>
                <div class="receipt-item w15 center">
                    <span class="receipt-name">销售客户经理</span>
                </div>
                <div class="receipt-item w15 center">
                    <span class="receipt-name">客户</span>
                </div>
            </div>
            <div class="receipt-column column-line-2">
                <div class="receipt-item w35 line-2">
                    <span class="receipt-name"></span>
                </div>
                <div class="receipt-item w35 line-2">
                    <span class="receipt-name"></span>
                </div>
                <div class="receipt-item w15 line-2">
                    <span class="receipt-name"></span>
                </div>
                <div class="receipt-item w15 line-2">
                    <span class="receipt-name"></span>
                </div>
            </div>
            <div class="receipt-column column-line-5">
                <div class="receipt-item w15 line-5">
                    <span class="receipt-name">付款记录</span>
                </div>
                <div class="receipt-line">
                    <div class="receipt-item w20 center">
                        <span class="receipt-name">付款时间</span>
                    </div>
                    <div class="receipt-item w175 center">
                    <span class="receipt-name">付款金额</span>
                    </div>
                    <div class="receipt-item w175 center">
                        <span class="receipt-name">付款方式</span>
                    </div>
                    <div class="receipt-item w15 center">
                        <span class="receipt-name">出纳签章</span>
                    </div>
                    <div class="receipt-item w15 center">
                        <span class="receipt-name">客户确认签字</span>
                    </div>
                </div>
                <div class="receipt-line">
                    <div class="receipt-item w20 center"><span class="receipt-value"></span></div>
                    <div class="receipt-item w175 center"><span class="receipt-value"></span></div>
                    <div class="receipt-item w175 center"><span class="receipt-value"></span></div>
                    <div class="receipt-item w15 center"><span class="receipt-value"></span></div>
                    <div class="receipt-item w15 center"><span class="receipt-value"></span></div>
                </div>
                <div class="receipt-line">
                    <div class="receipt-item w20 center"><span class="receipt-value"></span></div>
                    <div class="receipt-item w175 center"><span class="receipt-value"></span></div>
                    <div class="receipt-item w175 center"><span class="receipt-value"></span></div>
                    <div class="receipt-item w15 center"><span class="receipt-value"></span></div>
                    <div class="receipt-item w15 center"><span class="receipt-value"></span></div>
                </div>
                <div class="receipt-line">
                    <div class="receipt-item w20 center"><span class="receipt-value"></span></div>
                    <div class="receipt-item w175 center"><span class="receipt-value"></span></div>
                    <div class="receipt-item w175 center"><span class="receipt-value"></span></div>
                    <div class="receipt-item w15 center"><span class="receipt-value"></span></div>
                    <div class="receipt-item w15 center"><span class="receipt-value"></span></div>
                </div>
                <div class="receipt-line" style="border-bottom:0;">
                    <div class="receipt-item w20 center"><span class="receipt-value"></span></div>
                    <div class="receipt-item w175 center"><span class="receipt-value"></span></div>
                    <div class="receipt-item w175 center"><span class="receipt-value"></span></div>
                    <div class="receipt-item w15 center"><span class="receipt-value"></span></div>
                    <div class="receipt-item w15 center"><span class="receipt-value"></span></div>
                </div>
            </div>
        </div>
	</div>
</body>
</html>